<template>
  <div class="action-panel">
    <div
      :class="['iconfont icon-like-solid', isLiked ? 'active' : '']"
      @click="userAction('VIDEO_LIKE')"
    >
      {{ videoInfoData?.likeCount }}
    </div>
    <div
      @click="userActionCoin('VIDEO_COIN')"
      :class="['iconfont icon-toubi', isCoined ? 'active' : '']"
    >
      {{ videoInfoData?.coinCount }}
    </div>
    <div
      @click="userAction('VIDEO_COLLECT')"
      :class="['iconfont icon-collection-solid', isCollected ? 'active' : '']"
    >
      {{ videoInfoData?.collectCount }}
    </div>
  </div>
  <VideoCoin ref="videoCoinRef"></VideoCoin>
</template>

<script setup lang="ts">
import type { VideoInfo } from '@/services/api/home'
import { useHomeStore } from '@/stores/home'
import { computed, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
import { ACTION_TYPE } from '@/utils/Constants'
import {
  VideoDoActionHttpRequest,
  type UserAction,
  type VideoDetailResultVO
} from '@/services/api/video'
import { useRoute } from 'vue-router'
import VideoCoin from './VideoCoin.vue'
import message from '@/utils/message'
import { mitter } from '@/eventbus/eventBus'

const homeStore = useHomeStore()
const route = useRoute()
const isLiked = ref<boolean>(false)
const isCollected = ref<boolean>(false)
const isCoined = ref<boolean>(false)

//获取视频详情数据包括行为操作
const videoInfoDetail: any = inject('videoInfo')

//视频详情
const videoInfoData = computed<VideoInfo>(() => {
  if (!videoInfoDetail.value) return
  return videoInfoDetail.value.videoInfo
})
//行为操作详情
const userActionList = computed<UserAction[] | []>(() => {
  if (!videoInfoDetail.value) return
  return videoInfoDetail.value.userActionList
})

//监听状态
watchEffect(() => {
  isLiked.value =
    userActionList.value?.some((item) => item.actionType === ACTION_TYPE.VIDEO_LIKE.value) ?? false
  isCoined.value =
    userActionList.value?.some((item) => item.actionType === ACTION_TYPE.VIDEO_COIN.value) ?? false
  isCollected.value =
    userActionList.value?.some((item) => item.actionType === ACTION_TYPE.VIDEO_COLLECT.value) ??
    false
})

//检查用户操作列表中是否存在指定的 actionType
// const checkUserAction = (userActionList: Ref<any[]>, actionTypeKey: keyof typeof ACTION_TYPE) => {
//   return computed<boolean>(() => {
//     return (
//       userActionList.value?.some((item) => item.actionType === ACTION_TYPE[actionTypeKey].value) ??
//       false
//     )
//   })
// }

//行为操作
const userAction = async (type: string) => {
  //检查是否登录
  if (!homeStore.userInfo || Object.keys(homeStore.userInfo).length == 0) {
    homeStore.setLogin(true)
    return
  }
  await VideoDoActionHttpRequest({
    videoId: route.params.videoId as string,
    actionType: ACTION_TYPE[type].value
  })
  if (type == 'VIDEO_LIKE') {
    if (isLiked.value) {
      isLiked.value = false
      videoInfoData.value.likeCount--
    } else {
      isLiked.value = true
      videoInfoData.value.likeCount++
    }
  } else if (type == 'VIDEO_COLLECT') {
    if (isCollected.value) {
      isCollected.value = false
      videoInfoData.value.collectCount--
    } else {
      isCollected.value = true
      videoInfoData.value.collectCount++
    }
  }
}

//投币
const videoCoinRef = ref()

const userActionCoin = (type: string) => {
  //检查是否登录
  if (!homeStore.userInfo || Object.keys(homeStore.userInfo).length == 0) {
    homeStore.setLogin(true)
    return
  }

  if (isCoined.value) {
    message.warning('对本稿件的投币数已用完')
    return
  }
  videoCoinRef.value.show()
}

onMounted(() => {
  mitter.on('setCoinStatus', () => {
    isCoined.value = true
  })
})

onUnmounted(() => {
  mitter.off('setCoinStatus')
})
</script>

<style lang="less" scoped>
.action-panel {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e3e5e7;
  padding: 20px 0px;
  .iconfont {
    cursor: pointer;
    color: #61666d;
    display: flex;
    align-items: center;
    margin-right: 40px;
    &::before {
      margin-right: 10px;
      font-size: 35px;
    }
    &:hover {
      color: #4d4e4f;
    }
  }
  .active {
    &::before {
      color: var(--blue);
    }
  }
}
</style>
